import classNames from 'classnames'
import './monthBill.scss'
import {useMemo } from 'react'
import {useNavigate} from 'react-router-dom'
import {useDispatch} from 'react-redux'
import {setCurrentMonth} from '@/store/modules/billStore'

const MonthBill = ({ monthKey, monthBillList }) => {
  // 计算统计
  const monthResult = useMemo(() => {
    if (monthBillList) {
      //收入
      const income = monthBillList.filter(item => item.type === 'income')
        .reduce((a, c) => a + c.money, 0)
      //支出
      const pay = monthBillList.filter(item => item.type === 'pay')
        .reduce((a, c) => a + c.money, 0)
      return { income, pay, total: income + pay }
    } else {
      return { income: 0, pay: 0, total: 0 }
    }
  }, [monthBillList])

  const navigate = useNavigate()
  const dispach = useDispatch()
  const toMonthBill = ()=>{
    dispach(setCurrentMonth(monthKey))
    navigate('/')
  }
  return (
    <div className={classNames('dailyBill')} onClick={toMonthBill}>
      <div className="header">
        <div className="dateIcon">
          <span className="date">{monthKey}</span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{monthResult.pay.toFixed(2)}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{monthResult.income.toFixed(2)}</span>
          </div>
          <div className="balance">
            <span className="money">{monthResult.total.toFixed(2)}</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>
    </div>
  )
}
export default MonthBill